<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>权限</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/global.css">
    <style>
        .layui-treeSelect-body{
            max-height: 230px;
        }

        .layui-form-select dl{
            max-height: 230px;
        }

    </style>
</head>
<body>

<div class="edit-form layui-form" lay-filter="layuiadmin-form-privilegeadmin" id="layuiadmin-form-privilegeadmin"
     style="padding: 20px 0 0 0;">

    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-inline">
            <input th:value="${privilege.name}" type="text" name="name" lay-verify="required" placeholder="请输入名称"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">父权限</label>
        <div class="layui-input-inline">
            <input type="text" id="tree" lay-filter="tree" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">链接地址</label>
        <div class="layui-input-inline">
            <input th:value="${privilege.url}" type="text" name="url" lay-verify="required" placeholder="请输入地址"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-hide">
        <input th:value="${privilege.id}" type="hidden" name="id">
        <input th:value="${privilege.dependentId}" type="hidden" name="dependentId">
        <input type="button" lay-submit lay-filter="LAY-privilege-front-submit" id="LAY-privilege-front-submit" value="确认">
    </div>

</div>

<script src="../../../layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '../../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'upload','treeSelect'], function () {
        var $ = layui.$
            , form = layui.form
            , upload = layui.upload;

        upload.render({
            elem: '#layuiadmin-upload-privilegeadmin'
            , url: layui.setter.base + 'json/upload/demo.js'
            , accept: 'images'
            , method: 'get'
            , acceptMime: 'image/*'
            , done: function (res) {
                $(this.item).prev("div").children("input").val(res.data.src)
            }
        });

        var treeSelect= layui.treeSelect;

        treeSelect.render({
            // 选择器
            elem: '#tree',
            // 数据
            data: '/privilege/list',
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 占位符
            placeholder: '修改默认提示信息',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            // 点击回调
            click: function(treeObj,treeNode){
                document.querySelector('input[name=dependentId]').value=treeNode.id;
            },
            preload:function(result){
                if (result.code == 0 && result.data.total > 0) {
                    {
                        result.data.list.forEach(f=>delete f.url);
                        return result.data.list;
                    }
                }
              return [];
            },
            treeOptions: {
                data: {
                    simpleData: {//简单数据模式
                        enable: true,
                        idKey: "id",
                        pIdKey: "dependentId",
                        rootPId: null
                    }
                }
            },
            // 加载完成后的回调函数
            success: function (treeObj,input) {
                var dependentId = document.querySelector('input[name=dependentId]').value;
                var node = treeObj.getNodeByParam("id", dependentId);
                if (node != null) {
                    treeObj.selectNode(node, true);//指定选中ID的节点
                    input.value = node.name;
                }
            }
        });

    })


</script>
</body>
</html>